<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
    <div style="color:red" id="div">我是div</div>

    <script>
        // //  获取标签对象
        // var oDiv = document.querySelector('div');
        // //  获取行内式css设定的字体颜色
        // var res1 = oDiv.style.color;
        // console.log( res1 );
        // //  获取内部式css设定的样式 执行结果是 空字符串
        // var res2 = oDiv.style.width;
        // console.log( res2 );

        // // JavaScript提供的获取css样式的方法
        // var res3 = window.getComputedStyle(oDiv).width;
        // console.log( res3 );

        // var res4 = window.getComputedStyle(oDiv).color;
        // console.log( res4 );


        var oDiv = document.getElementById('div');

        // console.log( window.getComputedStyle );
        // console.log( window.getComputedStyle(oDiv).width );

        // console.log( oDiv.currentStyle.width );

        // if( window.getComputedStyle ){
        //     console.log( window.getComputedStyle(oDiv).width );
        // }else{
        //     console.log( oDiv.currentStyle.width );
        // }

        // 分装成一个函数的形式
        // 参数1:要获取css样式的标签对象
        // 参数2:css样式属性
        function myGetStyle(element,style){
            if( window.getComputedStyle ){
                return window.getComputedStyle(element)[style] ;
            }else{
                return element.currentStyle[style] ;
            }
        }

    </script>

    <script>
        /*
            获取css样式

                1,  标签对象.style.属性
                    只能获取行内式 的 css样式

                2,  JavaScript提供的获取标签 执行css 样式的方法

                    标准浏览器
                        var 变量 = window.getComputedStyle(标签对象).属性;

                    低版本IE浏览器
                        var 变量 = 标签对象.currentStyle.属性;

                    兼容语法:
                        if( window.getComputedStyle ){
                            //  如果 window.getComputedStyle 这个方法存在 不是 undefined 
                            //  证明是 标准浏览器
                            var 变量 = window.getComputedStyle(标签对象).属性;
                        }else{
                            //  没有 window.getComputedStyle 这个方法存在
                            //  是 版本IE浏览器 
                            var 变量 = 标签对象.currentStyle.属性;
                        }

        
        */
    </script>
</body>
</html>